import React, { useState, useEffect } from "react";
import { Outlet } from "react-router-dom";
import Footer from 'components/Footer'

import './home.scss'
import Search from './components/Search'
import Recommended from './components/recommended'
import City from "./components/city";
import TargetList from "./components/TargetList";
import * as api from 'api/index'


function Home() {
  //目的地
  let [targetList, setTargetList] = useState([])
  //请求数据
  const getRecommended = () => {

    api.destinationList().then((res) => {

      setTargetList(res.result)
    })
  }
  useEffect(getRecommended, [])

  //别墅列表
  let [recommended, setRecommended] = useState([])
  //请求数据
  const getvillaTypes = () => {
    api.villaTypes().then((res) => {

      setRecommended(res.result)
    })
  }
  useEffect(getvillaTypes, [])
  //城市列表
  let [city, setCity] = useState([])
  const getCity = () => {
    api.houseCity().then((res) => {
      console.log(res);
      setCity(res.result)
    })
  }
  useEffect(getCity, [])

  return (<div className="home">
    {/* logo */}
    <Search />
    {/* <!-- 背景图 --> */}
    <div className="banner">
      <img src="https://img.villaday.com/images/t9/406/406-14755427.png?x-oss-process=image/resize,m_fill,w_750,h_500,limit_0/sharpen,100/format,webp" alt=""></img>
    </div>

    {/* <!-- 别墅推荐 --> */}
    <Recommended recommended={recommended} />

    {/* <!-- 热门城市 --> */}
    <City city={city} />
    {/* <!-- 目的地 --> */}
    <TargetList targetList={targetList} />
    <Outlet />
    <Footer active="01" />
  </div>
  )
}

export default Home